<template>
  <view>
    <up-sticky bg-color="#fff" :offset-top="91">
      <up-tabs :list="tabs" @click="changeTab" lineColor="#fd7753"></up-tabs>
    </up-sticky>
    <at-card>
      <view class="flex">
        <image src="/static/logo.png" style="width: 100rpx;height: 100rpx" mode="aspectFill"/>
        <view style="flex: 1" class="ml-20">
          <view class="flex-between">
            <view class="fw-600">java工程师</view>
            <view class="f-s-m f-c-9">2024-12-23</view>
          </view>
          <view class="flex-between">
            <view>
              <view class="flex f-s-m f-c-9 mt-10">
                <view>上海市</view>
                <view class="mx-10">|</view>
                <view>西路科技有限公司</view>
              </view>
              <view class="fw-600 money mt-10">
                12-15k/月
              </view>
            </view>
            <view class="flex" style="margin-left: auto">
              <view class="refuse-btn f-s-m mr-10">拒绝</view>
              <view class="agree-btn f-s-m">同意</view>
            </view>
          </view>
        </view>
      </view>
      <up-divider></up-divider>
      <view>
        <view class="flex">
          <view class="mr-30" style="width: 150rpx">面试时间</view>
          <view class="f-c-9">2025-12-18 14:00</view>
        </view>
        <view class="flex mt-20">
          <view class="mr-30" style="width: 150rpx">联系人</view>
          <view class="f-c-9">张经理</view>
        </view>
        <view class="flex mt-20">
          <view class="mr-30" style="width: 150rpx">联系电话</view>
          <view class="f-c-9">18888888888</view>
        </view>
        <view class="flex mt-20" style="align-items: flex-start;">
          <view class="mr-30" style="width: 150rpx">面试地点</view>
          <view class="f-c-9">上海市浦东新区徐泾镇褚光路1588弄100号</view>
        </view>
        <view class="flex mt-20" style="align-items: flex-start;">
          <view class="mr-30" style="width: 150rpx">备注</view>
          <view class="f-c-9"></view>
        </view>
      </view>
    </at-card>
    <up-loadmore
        nomore-text="没有更多数据了"
        color="#fd7753"
        lineColor="#fd7753"
        line
    />
  </view>
</template>

<script setup>

import {ref} from "vue";

const tabs = ref([
  {
    name: '面试邀请',
    id: 0
  },
  {
    name: '面试中',
    id: 1
  },
  {
    name: '面试完成',
    id: 2
  },
  {
    name: '面试拒绝',
    id: 3
  },
])


const changeTab = (e) => {
  console.log(e)
}
</script>

<style lang="scss" scoped>
@mixin btn {
  border-radius: 100rpx;
  padding: 4rpx 20rpx;
}

.refuse-btn {
  @include btn;
  border: 1px solid #999;
  color: #999;
}

.agree-btn {
  @include btn;
  background: $theme-color;
  color: #fff;
}
</style>